<template>
  <confirm 
  v-model="remindConfirm"
  title="请选择提醒时间"
  :close-on-confirm="false"
  @on-confirm="onRemindConfirm"
  @on-cancel="onCancel"
  class="client-remind">
    <datetime
    clear-text="取消时间"
    :startDate="timer"
    endDate="2040-01-01 00:00"
    @on-clear="values.timer_message_time = ''"
    confirmText="完成"
    format="yyyy-MM-dd HH:mm:00"
    cancelText="取消"
    type="datetime"
    popper-class="popup-datetime"
    title=" "
    :class="{'weui-cell_warn': $v.values.timer_message_time &&
    $v.values.timer_message_time.$error }"
    v-model="values.timer_message_time"
    placeholder="请选择提醒时间">
    </datetime>
    <div class="warning-text" v-if="$v.values.timer_message_time.$error === true">
      <template v-if="$v.values.timer_message_time.required === false">请选择一个提醒时间</template>
      <template v-if="$v.values.timer_message_time.greaterTimeNow === false">提醒时间要在当前时间之后</template>
    </div>
  </confirm>
</template>
<script>

import Cell from 'vux/src/components/cell'
import Group from 'vux/src/components/group'
import { DatePicker } from 'element-ui'
import Confirm from 'vux/src/components/confirm'

import { validationMixin } from 'vuelidate'
import { greaterTimeNow } from '../lib/validator'
import { required, minLength } from 'vuelidate/lib/validators'

import { mapActions } from 'vuex'
import {showDialog, hideDialog} from '../lib/dialog'
import Q from 'q'
const dateformat = require('dateformat')

export default {
  mixins: [validationMixin],
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    clientId: {}
  },
  data () {
    return {
      values: {
        timer_message_time: ''
      },
      timer: '',
      remindConfirm: false,
      timer: '',
    }
  },
  validations () {
    console.log(this.values.timer_message_time, 'this.values.timer_message_time', typeof this.values.timer_message_time)
    return {
      values: {
        timer_message_time: {
          required: required,
          greaterTimeNow: greaterTimeNow(this.values.timer_message_time)
        }
      }
    }
  },
  methods: {
    initCurrentDateTime () {
      var d = new Date()
      var month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
      var day = d.getDate() < 10 ? '0' + (d.getDate()) : d.getDate()
      var hours = d.getHours()
      var minutes = d.getMinutes()
      var str = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + minutes
      this.timer = str
    },
    onRemindConfirm () {
      this.$v.values.$touch()
      if (this.$v.$error === true) return false
      this.saveTimer()
      this.$emit('input', this.values.timer_message_time)
      this.$emit('on-confirm')
    },
    onCancel () {
      this.remindConfirm = false
      this.$emit('on-cancel')
    },

    saveTimer () {
      return Q.Promise((resolve, reject) => {
        this.$vux.loading.show({text: '保存中...'})
        this.saveCustomRemindTimer({
          custom_id: this.clientId,
          timer_message_time: dateformat(this.values.timer_message_time, 'yyyy-mm-dd HH:mm:00')
        }).then(response => {
          this.$vux.loading.hide()
          if (response.data.errcode === 0) {
            showDialog(response.data.results)
            resolve()
          } else {
            showDialog(response.data.errmsg)
            reject()
          }
        }).catch(() => {
          reject()
          showDialog('保存失败！请联系管理员')
          this.$vux.loading.hide()
        })
      })
    },

    ...mapActions({
      saveCustomRemindTimer: 'saveCustomRemindTimer'
    })
  },
  beforeMount () {
    // this.initCurrentDateTime()
  },
  mounted () {
  },
  components: {
    Cell,
    Group,
    Datetime: DatePicker,
    Confirm
  },
  watch: {
    isShow (value) {
      this.remindConfirm = value
      console.log(this.remindConfirm, value)
    },
    values: {
      handler: function (cur, old) {
        if (typeof cur.timer_message_time === 'object') {
          // this.values.timer_message_time = dateformat(cur.timer_message_time, 'yyyy/MM/dd HH:mm:00')
        }
        // console.log(typeof cur.timer_message_time, 'timer', this.values.timer_message_time )
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.client-remind {
  .vux-no-group-title {
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }

  .weui-cell__ft {
    text-align: center;
  }

  .warning-text {
    color: red;
    font-size: 12px;
  }
}

.popup-datetime {
  z-index: 5001!important;
}
</style>
